.eux-icon {
  background: url("/dist/img/common/icon.png") no-repeat;
  -webkit-background-size: 480px 104px;
  background-size: 480px 104px;
}

@mixin icon($width, $height, $x, $y) {
  display: inline-block;
  top: 2px;
  position: relative;
  background-position: $x $y;
  width: $width;
  height: $height;
}

.eux-icon-close {
  @include icon(24px, 24px, 0, 0);
  &:hover {
    background-position: -24px 0;
  }
  &.icon-inverse {
    background-position: -48px 0;

    &:hover {
      background-position: -24px 0;
    }
  }
}

.eux-icon-close2 {
  margin-left:8px;
  @include icon(16px, 16px, 0, -24px);
}

.eux-icon-eye {
  @include icon(16px, 16px, -16px, -24px);
}

.eux-icon-comment {
  @include icon(16px, 16px, -32px, -24px);
}

.eux-icon-good {
  @include icon(16px, 16px, -48px, -24px);
}
.eux-icon-good-lg {
  @include icon(48px, 48px, 0, -40px);

  &:hover, &.active {
    background-position: -48px -40px;
  }
}
.eux-icon-love-lg {
  @include icon(48px, 48px, -96px, -40px);

  &:hover, &.active {
    background-position: -144px -40px;
  }
}

.eux-icon-delete-lg {
  @include icon(48px, 48px, -192px, -40px);

  &:hover {
    background-position: -240px -40px;
  }
}

.eux-icon-edit-lg {
  @include icon(48px, 48px, -288px, -40px);

  &:hover {
    background-position: -336px -40px;
  }
}

.eux-icon-bell {
  @include icon(24px, 24px, -168px, 0);
}

.eux-icon-star {
  @include icon(24px, 24px, -144px, 0);
}
